<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.home{
		width:100%;
		position:absolute;
		top:0;
		bottom:0;
		background: #f6f6f6;
		.navBar{
			width: 100%;
		}
		.contents{
			display: flex;
			position: absolute;
			top: 4.375rem;
			bottom: 0px;
			overflow: hidden;
			.menu{
				min-width: 200px;//.el-menu-item  最小宽度200px,避免宽度改变
				background: #ffffff;
				flex:2 2 12.19rem;
				overflow-y: auto;
			}
			.mainView{
				flex:2 2 90%;
				overflow-y: auto;
				text-align: left;
				background-color: #f0f0f0;
			}
			.sortMenuBox{
				position: absolute;
				width: 100%;
				top: 0;
				height: 100%;
				z-index: 99;
			}
		}
		.loading{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.7);
			z-index:9;
			.loading-box{
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
				position: absolute;
				color: #fff;
				font-size: 3rem;
				animation: trueSelf 1.5s infinite linear;
			}
			@keyframes trueSelf{
				0%{
					transform: rotate(0deg)
				}
				100%{
					transform: rotate(360deg)
				}
			}
		}
	}

	.slide-fade-enter-active {
		transition: all .8s ease;
	}
	.slide-fade-leave-active {
		transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
	.slide-fade-enter, .slide-fade-leave-active {
		transform: translateX(100%);
		opacity: 0;
	}
</style>


<template>
	<el-row class="home">
		<el-col :span="24">
			<navbar 
			class="navBar"
			v-on:setRoleId="setRoleId"
			v-on:setSuperMan="setSuperMan"
			v-on:handleSortMeun='handleSortMeun'
			></navbar>
		</el-col>

		<el-col :span="24" class="contents">
		
		<auth-menu 
		:roleId='roleId'
		class="menu"
		></auth-menu>

		<div class="mainView">
			<transition name="fade" mode="out-in" >
			<router-view ></router-view>
			</transition>
			
		</div>

		<sort-menu 
			class="sortMenuBox"
			v-if='isSuperMan && sortMenu'
			v-on:handleSortMeun='handleSortMeun'
		></sort-menu>

		</el-col>

	</el-row>
</template>


<script>
	import AuthMenu from './auth/AuthMenu.vue'
	import AuthUser from './auth/AuthUser.vue'
	import sortMenu from './sortMenu/index.vue'
	import Navbar from './Nav.vue'
	export default {
		name: 'hello',
		data () {
		return {
			roleId: '',
			isSuperMan:true,//是否超级管理
			sortMenu:false,// 是否显示菜单排序
		}
		},
		components: {
			AuthMenu: AuthMenu,
			AuthUser: AuthUser,
			Navbar: Navbar,
			sortMenu:sortMenu,
		},
		watch: {
			'$route' (to, from) {
				// console.log('hello.vue watch $route to :' , to , ' from:', from);
			}
		},
		methods: {
			setRoleId (e) {
				// console.warn('setRoleId', e)
				this.roleId = e;
				this.sortMenu = false;
			},
			setSuperMan(e){
				this.isSuperMan = e;

			},
			handleSortMeun(e){
				switch(e){
					case 0:
						// 关闭编辑弹出栏
						this.sortMenu = false;
						break;
					case 1:
						// 关闭编辑弹出栏并且更新菜单列表
						this.sortMenu = false;
						console.log('重新排序')
						location.reload();
						break;
					case 2:
						// 打开弹出栏
						this.sortMenu = true;
						break;
				}
			}
		}
	}

</script>

